<!DOCTYPE html>
<html   xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta name="title" th:content="'活动_'+${title}" />
		<meta name="description" th:content="${description}" />
		<meta name="keywords" th:content="${keywords}" />
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>活动</title>
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/swiper.min.css">
		<link rel="stylesheet" href="css/index.css">
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js"></script>
		<style>
			@media screen and (max-width: 768px){
				.activityList{
					width: calc(100%) !important;
					max-width: calc(100%);
					padding: 0 0 10px 0;
					margin-bottom: 20px;
				}
			}
		</style>
	</head>
	<body>
		<div id="root">
			<div>
				<div class="cOYSvF">
					<div class="header-page"></div>					
					<div class="swiper-shop swiper-container">
						<div class="swiper-wrapper">
							<div class="swiper-slide" style="background: url(img/banner.png);">

							</div>
						</div>
						<div class="swiper-pagination"></div>
					</div>
					<div class="eZHbVe" style="margin-top: 30px;">
						<div class="activity">
							<div class="clearfix">
								<div class="activityList" th:each="active :${activitys}">
									<div class="activityImg">
										<img th:src="${active.images}" alt="">
									</div>
									<div class="activityCont">
										<p th:text="${active.title}">昔日有酒昔日醉，今朝文创焕新姿！</p>
										<div class="activityPoint">地址：观音上商务区4号楼403b</div>
										<div class="activityPoint">主办单位：厦门市华美云海科技活动</div>
										<div class="activityPoint">开始时间：<span th:text="${active.createTime}"></span>2021-05-1815:00:00</div>
										<a target="_blank" th:href="@{'shops/'+${active.shopId}+'/activity/detail/'+${active.id}+'.html'}" class="activityBtn">立即查看</a>
										<div class="activityNum">
											已有<span>200人</span>报名
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
		<div class="footer-page"></div>
		<div class="login-cli"></div>
	</div>
	<script>
		$(function() {
			$(".header-page").load("http://122.14.195.113:8089/header.html");
			$(".footer-page").load("http://122.14.195.113:8089/footer.html");
			$(".login-cli").load("http://122.14.195.113:8089/login-cli.html");
		});
			var swiper = new Swiper('.swiper-shop', {
				spaceBetween: 0,
				loop: true,
				autoplay: {
					delay: 3000,
					disableOnInteraction: false,
				},
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				},
				observer: true,
				observeParents: true,
				watchOverflow: true
			});
		</script>
	</body>
</html>
